<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <STYLE>
        .topPanel{
            text-align: center;
            font-size: 16px;
        }
        .topPanel strong{
            font-size: 18px;
            font-weight: bolder;
        }
        .cord{
            padding: 20px;

        }
        .layui-panel{
             background-color: #f3f5f7;
         }
        /*
        //隐藏滚动条
        body::-webkit-scrollbar {display:none}
        */
    </STYLE>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 收益数据</strong></div>
    <div class="padding border-bottom">
        <div class="layui-row layui-col-space15 topPanel">
            <div class="layui-col-md4">
                <div class="layui-panel">
                    <div class="cord">昨日收益/金币</div>
                    <strong th:text="${arrayList.get(0)}">19</strong>
                    <div class="cord">近30日收益 <strong th:text="${arrayList.get(2)}"></strong>金币</div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-panel">
                    <div class="cord" >本月收益/金币</div>
                    <strong th:text="${arrayList.get(1)}">11</strong>
                    <div class="cord">累计收益 <strong th:text="${arrayList.get(3)}"></strong>金币</div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-panel">
                    <div class="cord">可提现金额/元</div>
                    <strong th:text="${arrayList.get(4)}">45</strong>
                    <div class="cord">去提现</div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 ">
            <div class="layui-col-md12" >
                <div class="layui-panel">
                    <div id="articleChart" style="height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
    $(function () {
        $.ajax({
            type:'post',
            url:'/chart/yieldList',
            dataType: "json",
            async: false,
            success:function (data) {
                console.log(data);
                console.log(data.day);
                //3.初始化实例对象 echarts.init(dom容器)
                var myChart = echarts.init(document.getElementById('articleChart'));
                //myChart.showLoading();
                //4.指定配置项和数据
                option = {
                    title: {
                        text: '近7天收益情况'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['收益','下载量']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                       /* data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']*/
                        data: data.day
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        /*data: [820, 932, 901, 934, 1290, 1330, 1320],*/
                        name: '收益',
                        type: 'line',
                        smooth: true,
                        data: data.priceNum
                    },{
                       /* data: [820, 932, 901, 934, 1290, 1330, 1320],*/
                        name: '下载量',
                        type: 'line',
                        smooth: true,
                    data: data.xiaNum
                    }]
                };
                //5.将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
    });
</script>
</html>